<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

    </style>
</head>
<body>
<div id="app">
    <template>
        <template>
            <el-button  type="danger" style="margin-bottom: 0px" round @click="dialogFormVisible = true">添加物流公司</el-button>
            <el-table
                    :data="logistics"
                    style="width: 100%">
                <el-table-column label="物流公司编号" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.logisticsId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="物流公司名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.logisticsName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.principal }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="联系方式">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.logisticsContact }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="运营区域" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.area }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" prop="scope.row.joinTime"
                                 :formatter="dateFormat"
                                 :resizable="false" label="加入时间" >
<!--                    <template slot-scope="scope">-->
<!--                        <span style="margin-left: 10px">{{ scope.row.joinTime }}</span>-->
<!--                    </template>-->
                </el-table-column>
                <el-table-column label="价格（元/每吨）" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete"  circle @click="open(scope.$index, scope.row)"></el-button>

                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-pagination    class="pagination"    background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="current"
                          :page-sizes="[3,5,8,10]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next"
                          :total="total">

        </el-pagination>
        <!--保存用户的对话框-->
        <el-dialog title="产品信息" :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="logistic">
                <el-form-item label="物流公司名称" :label-width="formLabelWidth">
                    <el-input v-model="logistic.logisticsName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="负责人" :label-width="formLabelWidth">
                    <el-input v-model="logistic.principal" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="logistic.logisticsContact" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="运营区域" :label-width="formLabelWidth">
                    <el-input v-model="logistic.area" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格（元/每吨）" :label-width="formLabelWidth">
                    <el-input v-model="logistic.price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCompany">确 定</el-button>
            </div>
        </el-dialog>

    </template>
</div>
<script>

    new Vue({
        el:"#app",
        data() {
            return {
                dialogFormVisible: false,//控制对话框的显示
                logistics:null,  //获取集合存入
                formLabelWidth: '120px', //表单标签的宽度
                total:0,//总条数
                current:1,//当前条数
                pageSize:3, //每页条数
                logistic:{
                    logisticsName:'',
                    principal:'',
                    logisticsId:'',
                    logisticsContact:'',//真实姓名
                    area:'',//盐
                    joinTime:'',//电话
                    price:''
                },

            }
        },
        methods:{
            dateFormat:function(row,column){
                console.log(column);
                var date = new Date(row.joinTime);
                console.log(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            },
            closeMyDialog() { //清空数据，关闭对话框
                this.logistic={
                    logisticsName:'',
                    logisticsId:'',
                        principal:'',
                        logisticsContact:'',//真实姓名
                        area:'',//盐
                        joinTime:'',//电话
                        price:''
                }
            },
            loadPage(current){
                this.current = current;
                axios.get("/selectLogistic?current="+this.current).then(value => {
                    console.log(value);
                    if (value.data.state==1){
                    this.logistics=value.data.data.records;
                    this.total = value.data.data.total;
                    this.pageSize = value.data.data.size;
                    this.current = value.data.data.current;
                }
            })
            },
            saveCompany(){//确认按钮,保存用户信息
                if(this.logistic.logisticsId == ''){
                    axios.post("/logisticAdd", this.logistic)
                        .then(value => {
                            if (value.data.state == 1){
                                this.loadPage(1);
                            }
                        });

                    // axios.post("/roleAdd",this.role,this.user)
                    //     .then(value => {
                    //         if(value.data.state == 1){
                    //             alert("添加成功")
                    //         }
                    //     })


                }else{
                    axios.put("/logisticUpdate",this.logistic)
                        .then(value => {
                            if(value.data.state == 1){
                                alert("修改成功")
                                //this.loadPage(this.current);
                            }
                        });
                }
                this.dialogFormVisible = false;//隐藏对话框
            },
            deleteLogistics(index,row){
                axios.delete("/deleteLogistic/"+row.logisticsId)
                    .then(value => {
                        if(value.data.state == 1){
                            alert("修改成功");
                            this.row=value.data.data;
                            this.loadPage(1);
                            //this.loadPage(this.current);
                        }

                    })
            },
            handleEdit(index, row) {//修改
                console.log(index, row);
                this.logistic = row;
                this.dialogFormVisible = true;
            },
            handleCurrentChange(page){
                this.current = page;
                axios.get("/logisticPage/"+this.pageSize+"?current=" + this.current).then(value => {
                    console.log(value);
                    if (value.data.state == 1) {
                        this.logistics = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                })
            },
            handleSizeChange(size){
                this.pageSize = size;
                axios.get("/logisticPage/"+this.pageSize+"?current=" + this.current).then(value => {
                    console.log(value);
                    if (value.data.state == 1) {
                        this.logistics = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                })
            },
            open(index,row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/deleteLogistic/"+row.logisticsId)
                        .then(value => {
                                this.row=value.data.data;
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.loadPage(1);
                                //this.loadPage(this.current);

                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },


        mounted(){//vue挂载
            this.loadPage(1);
        }
    });

</script>
</body>
</html>